<template>
  <div class="user-wrapper balance-wrapper wrapper_1200">
   <!-- <div class="router-tips">
      <nuxt-link to="/">{{$t('page.goodsDetail.home')}}></nuxt-link>
      <nuxt-link :to="{path:'/user',query:{type:0}}">{{$t('page.users.userInfo.personalCenter')}}></nuxt-link>
      <span>{{userMenu[indexCur].title}}</span>
    </div> -->
    <category-List ref="cateGory" style="padding-bottom: 10px; border-bottom: 1px solid #eeeeee;"></category-List>
    <div class="content clearfix" style="display: flex;">
        <div class="left-box" style="border-right: 1px solid #eeeeee;">
            <div class="left-box">
                <div class="user-info" style="border-bottom: 1px solid #eeeeee;">
                  <div class="user-com-title" style="margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">
                    <!-- {{$t("page.index.Productbackend")}} -->
                    <div style="display: inline-block;">
                        <el-upload
                        :action="upLoadUrl"
                        
                        :limit="1"
                        :show-file-list="false"
                        accept="image/*"    
                        :before-upload="beforeAvatarUpload"
                        :on-success="handleAvatarSuccess"
                      >
                        <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="avatar">
                        <img v-else src="~assets/images/f.png" />
                      </el-upload>
                    </div>
                    </div>
                <!-- <div :class="$auth.user.is_open_member && $auth.user.is_money_level?'svip':''">
                    <img class="avatar" v-if="$auth.user.avatar" :src="$auth.user.avatar" alt="avatar">
                    <img v-else class="avatar" src='~assets/images/f.png'/>
                </div> -->
                <!-- <p class="name line2">{{$auth.user.nickname}}</p> -->
                </div>
                <div class="user-menu">
                  <template v-for="(menu,index) in userMenu">
                    <div style="display: flex; justify-items: center; margin-bottom: 30px;">
                       <div class="">
                          <img :src="menuCur == menu.key?menu.url1:menu.url" alt="" style="vertical-align: middle; width: 25px; height: 25px;">
                       </div>
                       <div :key="index" v-if="menu.key !== 14 || $auth.user.merchant_info" @click="goPage(menu,index)" class="menu-item"  :class="{active:menuCur == menu.key}">{{menu.title}}</div>
                    </div>
                  </template>
                </div>
            </div>
        </div>
       <div class="right-box">
         <div v-if="key == 22">
           <div class="btn-box">
             <span class="">
               <div style="display: flex;">
                 <div class="balance" style="margin-right: 12px;">
                    <div class="">
                      <div v-if="ImageShow == false" style="">
                        <span style="color: #fff;font-size: 12px;cursor: pointer;">{{$t('page.user.Balance')}}</span>
                        <img @click="Image" src="../utils/img/biyan.png" alt="" style="display: inline-block; width: 16px;cursor: pointer;">
                        <span style="display: block; font-size: 26px;font-weight: 600;color:#f89900;">******</span>
                      </div>
                      <div v-else>
                        <span style="color: #fff;font-size: 12px;cursor: pointer;">{{$t('page.user.Balance')}}</span>
                        <img @click="Image" src="../utils/img/eyes.png" alt="" style="display: inline-block; width: 16px;cursor: pointer;">
                        <span style="display: block; font-size: 26px;font-weight: 600;color:#f89900;">{{userInfo.now_money || 0}}</span>
                      </div>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <div style="">
                        <span style="font-size: 18px; color: #f89900;">{{userInfo.merchant_info?.mer_name}}</span>
                        <el-image :src="merchantLevel" class="icon-img" />
                      </div>
                      <span style="font-size: 12px; color: #000;">{{$t("page.index.nickname")}}</span>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{mer_credit}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t("page.index.credit")}}</p>
                    </div>
                 </div>

               </div>

               <!-- <span>{{ userInfo.merchant_info?.mer_name }}</span> -->
               <!-- <el-image :src="merchantLevel" class="icon-img" /> -->
               <!-- <span> {{ $t("page.chat.credit") }} :{{ mer_credit }}</span> -->
               <!-- <span v-if="userInfo.fenxiao_code"> {{ $t("page.store.distribution") }} :{{ userInfo.fenxiao_code }}</span> -->
             </span>
             <!-- <el-badge :value="messageNum" class="item" :max="9" :hidden="messageNum===0">
               <el-button @click="chatVisible = true">{{$t("page.chat.customer")}}</el-button>
             </el-badge> -->
             <!-- <div class="visit" style="margin-top: 20px;" v-if="levelInfo"> -->
               <!-- <div class="visit-title">
                   {{$t('page.user.FavoriteProducts')}}
                </div> -->
              <!--  <div class="el-empty">
                  <div class="level-item">
                    <el-image class="icon" :src="levelInfo.icon" />
                    <div>{{ levelInfo.category_name }}</div>
                    <div>${{ levelInfo.category_threshold }}</div>
                    <div>{{$t('page.users.merchantLevel.uploadLimt')}}{{ levelInfo.category_max_prod }}</div>
                    <div>{{$t('page.users.merchantLevel.timeSize')}}{{userInfo.merchant_info?.mer_daynum || 365 }}{{$t('page.users.merchantLevel.day')}}</div>
                    <div>{{$t('page.users.merchantLevel.profit')}}{{ userInfo.merchant_info.spread_ratio }}%</div>
                  </div>
                </div> -->
             <!-- </div> -->
           </div>


           <div class="balance-box">
             <div class="flex">
               <div class="money-box" v-if="$auth.user">
                 <div class="count-item" v-if="userInfo.fenxiao_code">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{userInfo.fenxiao_code}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t("page.index.distribution")}}</p>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{mer_id || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.storeId')}}</p>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{care_count || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.followNum')}}</p>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{user_visit || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.accessNum')}}</p>
                    </div>
                 </div>
                 <!-- <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{userInfo.now_money || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.Totalassets')}}</p>
                    </div>
                 </div> -->
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{total_price || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.totalOrderAmount')}}</p>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{lirun_price || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.totalProfitOfOrders')}}</p>
                    </div>
                 </div>
                 <div class="count-item">
                    <div class="">
                      <span style="font-size: 18px; color: #f89900;">{{jrlirun_price || 0}}</span>
                      <p style="font-size: 12px; color: #000;">{{$t('page.index.todayProfit')}}</p>
                    </div>
                 </div>
                 <div class="count-item" @click="chatVisible = true">
                    <div class="">
                      <el-badge :value="messageNum" class="item" :max="9" :hidden="messageNum===0">
                        <div style="color: #f89900;" >{{$t("page.index.Customer")}}</div>
                      </el-badge>
                    </div>
                 </div>

                <!-- <div class="count-item" style="" v-if="levelInfo">
                   <el-image class="icon" :src="levelInfo.icon" />
                    <span>{{ levelInfo.category_name }}</span>
                   <div>${{ levelInfo.category_threshold }}</div>
                    <div>
                     <div>{{$t('page.index.uploadLimt')}} <span id="" style="color: #f89900;">{{ levelInfo.category_max_prod }}</span></div>
                     <div>{{$t('page.index.timeSize')}}<span id="" style="color: #f89900;">{{userInfo.merchant_info?.mer_daynum || 365 }}{{$t('page.index.day')}}</span></div>
                     <div>{{$t('page.index.profit')}} <span id="" style="color: #f89900;">{{ userInfo.merchant_info.spread_ratio }}%</span></div>
                   </div>
                </div> -->

                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.storeId')}}</span>
                   <p>{{mer_id || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.followNum')}}</span>
                   <p>{{care_count || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.accessNum')}}</span>
                   <p>{{user_visit || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.user.Totalassets')}}($)</span>
                   <p>{{userInfo.now_money || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.totalOrderAmount')}}($)：</span>
                   <p>{{userInfo.total_recharge || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.totalProfitOfOrders')}}($)：</span>
                   <p>{{userInfo.total_consume || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.todayAmount')}}($)：</span>
                   <p>{{userInfo.total_consume || 0}}</p>
                 </div> -->
                 <!-- <div class="money-item">
                   <span>{{$t('page.merchant.todayProfit')}}($)：</span>
                   <p>{{userInfo.total_consume || 0}}</p>
                 </div> -->
                 <!-- <div class="visit" style="margin-top: 20px;" v-if="levelInfo">
                    <div class="visit-title">
                       {{$t('page.user.FavoriteProducts')}}
                    </div>
                    <div class="el-empty">
                      <div class="level-item">
                        <el-image class="icon" :src="levelInfo.icon" />
                        <div>{{ levelInfo.category_name }}</div>
                        <div>${{ levelInfo.category_threshold }}</div>
                        <div>{{$t('page.users.merchantLevel.uploadLimt')}}{{ levelInfo.category_max_prod }}</div>
                        <div>{{$t('page.users.merchantLevel.timeSize')}}{{userInfo.merchant_info?.mer_daynum || 365 }}{{$t('page.users.merchantLevel.day')}}</div>
                        <div>{{$t('page.users.merchantLevel.profit')}}{{ userInfo.merchant_info.spread_ratio }}%</div>
                      </div>
                    </div>
                 </div> -->
               </div>

             </div>
             <div class="level-item">
                <el-image class="icon" :src="levelInfo.icon" />
                <div>{{ levelInfo.category_name }}</div>
                <div>${{ levelInfo.category_threshold }}</div>
                <div>{{$t('page.index.uploadLimt')}}<span id="" style="color: #f89900;">{{ levelInfo.category_max_prod }}</span></div>
                <div>{{$t('page.index.timeSize')}}<span id="" style="color: #f89900;">{{userInfo.merchant_info?.mer_daynum || 365 }}{{$t('page.index.day')}}</span></div>
                <div>{{$t('page.index.profit')}}<span id="" style="color: #f89900;">{{ userInfo.merchant_info?.spread_ratio }}%</span></div>

              </div>
           </div>

         </div>
         <div v-if="key == 23">
           <div class="balance-box">
              <div class="tab-box">
                <div class="hd clearfix">
                  <div class="hd-item MyOrder" style="margin-top: 30px;" :class="{on:tabCur == item.key}" v-for="(item,index) in tabList" :key="index" @click="bindTab(item)">{{item.title}}</div>
                </div>
                <div v-if="tabCur < 3" class="order-list">
                  <ul>
                    <div v-if="list.length == 0" style="width: 960px; margin-top: 50px;">
                      <div class="" style="text-align: center;">
                        <img style="margin: 0 auto; " src="~assets/images/noorder.png" alt="">
                        <p style="color: #909399;">{{$t('page.user.Nodatafound')}}</p>
                      </div>
                    </div>
                    <li v-else v-for="(item,index) in list" :key="index" style="padding-top: 20px;">
                      <div class="bd">
                        <div class="order-txt">
                          {{$t('page.users.orderList.date')}}: {{item.create_time}}
                          <nuxt-link class="mer_name" :to="{path:'/store',query:{id:item.mer_id}}">{{item.mer_name}}</nuxt-link>
                          <!-- <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div> -->
                        </div>
                        <div class="content">
                          <div v-for="(goods, index) in item.orderProduct" :key="index">
                            <div v-if="item.activity_type === 2" class="goods-item">
                                <div class="img-box">
                                  <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                                  <span >{{$t('page.index.presale')}}</span>
                                </div>
                                <div class="info-txt">
                                  <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                                  <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                                  <div class="price" v-if="goods.cart_info.productPresellAttr.presell_price">$ {{ goods.cart_info.productPresellAttr.presell_price }}</div>
                                  <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>
                                  <div class="develity_date">
                                    <!--全款预售-->
                                    <span v-if="goods.cart_info.productPresell.presell_type === 1">
                                      {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.asuccessfulpay') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                                    </span>
                                    <!--定金预售-->
                                    <span v-if="goods.cart_info.productPresell.presell_type === 2">
                                      {{$t('page.index.deliverytime')}}：{{ goods.cart_info.productPresell.delivery_type === 1 ? $t('page.index.afterpayingthebalance') : $t('page.index.resaleends') }}{{ goods.cart_info.productPresell.delivery_day }}{{$t('page.index.days')}}
                                    </span>
                                  </div>
                                </div>
                                <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                                <span class="num">x{{ goods.product_num }}</span>
                            </div>
                            <div v-else class="goods-item">
                                <div class="img-box">
                                  <img :src='(goods.cart_info.productAttr && goods.cart_info.productAttr.image) || goods.cart_info.product.image' alt="">
                                </div>
                                <div class="info-txt">
                                  <div class="title line2">{{goods.cart_info.product.store_name}}</div>
                                  <div class="info" v-if="goods.cart_info.productAttr.sku">{{goods.cart_info.productAttr.sku}}</div>
                                  <div class="price" v-if="goods.cart_info.productAttr.price">{{$t('page.users.orderList.totalPay')}}: $ {{ goods.cart_info.productAttr.price }}</div>
                                  <div class="price" v-else>$ {{ goods.cart_info.product.price }}</div>

                                </div>
                                <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                                <span class="num">x{{ goods.product_num }}</span>
                            </div>

                          </div>
                        </div>
                      </div>
                      <div class="foot" style="margin-top: 20px;">
                        <p>{{ item.total_num || 0 }} {{$t('page.orderDetails.item')}} ，{{$t('page.merchant.td')}}{{$t('page.index.amount')}} <span class="price">${{ item.real_mer_pay_money }} </span>
                        <span v-if="item.pay_postage > 0">({{$t('page.index.includingshipping')}}{{item.pay_postage}})</span>
                        </p>
                        <div class="btn-wrapper" style="margin-top: 20px;">
                          <div class="pay" v-if="tabCur === 0 || tabCur === 1 || tabCur === 2 " @click="goMerDetail(item)">{{$t('page.users.orderList.viewDetails')}}</div>
                          <div class="rest" v-if="tabCur === 0 && item.tidan == 2">{{$t('page.merchant.ytd')}}</div>
                          <div class="rest" v-else-if="tabCur === 0 && item.tidan == 1" @click="goTd(item)">{{$t('page.merchant.td')}}</div>
                          <div class="rest" v-if="tabCur === 0 || tabCur === 1 || tabCur === 2" @click="goCustomer(item)">{{$t("page.index.customer")}}</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
                <div v-else class="order-list">
                  <div class="condition">
                    <div>
                      <label>{{$t('page.merchant.key')}}：</label>
                      <el-input class="input" v-model="keyword" />
                    </div>
                    <div class="condition-price ml-20">
                      <label>{{$t('page.goodsList.price')}}：</label>
                      <el-input class="input" type="number" v-model="price_low"></el-input> - <el-input type="number" v-model="price_high" class="input"></el-input>
                    </div>
                    <el-button class="ml-20" @click="getList">{{ $t('page.merchant.query')  }}</el-button>
                  </div>
                  <div class="ml-20">
                    <div class="flex">
                      <label>{{$t('page.merchant.type')}}：</label>
                      <div class="categorize-box">
                        <div class="categorize-item" :class="categorize === '' ? 'active':''" @click="handleCategorize('')">
                          {{ $t("page.users.goodsCommentList.all") }}
                        </div>
                        <div class="categorize-item" v-for="item in category" :key="item.value" :class="categorize === item.value ? 'active':''" @click="handleCategorize(item.value)">
                          {{ item.label }}
                        </div>
                      </div>
                    </div>
                    <div class="flex">
                      <label>{{$t('page.merchant.type2')}}：</label>
                      <div class="bottom-categorize">
                        <div class="classifier" v-for="item in categorizeList" :key="item.value" :class="currentCategory === item.value ? 'active':''" @click="handleIds(item.value)">
                          {{ item.label }}
                        </div>
                      </div>
                    </div>
                      <!-- <el-cascader
                        v-model="currentCategory"
                        :options="category"
                        clearable
                        :props="{ expandTrigger: 'hover' }"
                      ></el-cascader> -->
                  </div>
                  <div>
                    <div class="my-order-btn-box" v-if="tabCur == 4 || tabCur == 3">
                      <div class="btn-box">
                        <div><el-checkbox v-model="allSelect"  @change="selectAllChange" /> <span> select all  </span></div>
                        <el-button v-if="tabCur == 3 && userInfo.merchant_info?.is_sj === 1" class="btn bg-color" @click="batchListing">{{ $t("page.merchant.batchListing") }}</el-button>
                        <el-button v-else-if="tabCur == 4 && userInfo.merchant_info?.is_xj === 1" class="btn bg-color" @click="batchDelisting">{{ $t("page.merchant.batchDelisting") }}</el-button>
                      </div>
                    </div>
                  </div>
                  <ul>
                    <li v-for="(goods,index) in list" :key="index">
                      <div class="bd">
                        <div class="content">
                          <div class="goods-item">
                              <el-checkbox v-if="goods.jj_status!=1"  class="checkbox" v-model="goods.checkbox" />
                              <div class="img-box">
                                <img :src='goods.image' alt="">
                              </div>
                              <div class="info-txt">
                                <div class="title line2">{{goods.store_name}}</div>
                                <div class="price" v-if="tabCur === 3">$ {{ goods.jh_price  || 0}}  &nbsp;&nbsp;&nbsp;&nbsp; {{ $t('page.goodsDetail.oldPrice') }}: $ {{ goods.price }}</div>
                                <div class="price" v-else>$ {{ goods.price || 0 }}</div>
                              </div>
                              <div style="color: red;">{{goods.is_refund==1? $t('page.users.userReturnList.refunding') :goods.is_refund==2? $t('page.index.partialrefund') :goods.is_refund==3? $t('page.index.fullrefund') :''}}</div>
                              <span class="num">x1</span>
                          </div>
                        </div>
                      </div>
                      <div class="foot">
                        <div class="btn-wrapper">
                          <div class="pay" v-if="tabCur === 3 && userInfo.merchant_info?.is_sj === 1" @click="handlebut(goods.product_id, 1,goods.jj_status)">{{goods.jj_status==1?'已上架':goods.jj_status==2?'上架':''}}</div>
                            <!-- Already listed     listing -->
                          <div class="pay" v-if="tabCur === 4 && userInfo.merchant_info?.is_xj === 1" @click="handlebut(goods.product_id, 2,goods.jj_status)">{{$t('page.merchant.goodXj')}}</div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
           </div>

         </div>

        <div v-if="key == 24">
            <!-- <div class="user-com-title" style="margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">商品库</div> -->
            <div class="wrapper sort-count goods_cate" style="display: flex; justify-content: start;">
                 <div class="">
                      <div class="classification" style="width: 140px; margin-left: -25px; border-right: 1px solid #eeeeee;">
                        <div class="titles">
                          <span>{{$t('page.index.Category')}}</span>
                        </div>
                        <div>
                          <!-- 分类 -->
                          <div class="category acea-row row-middle" >
                           <div @click="Allproducts()" class="products" style="">
                             <span id="" :style="isDanger == true && currer ==-1 ?'color:#f89900':'color:#000'" style="font-size: 14px;">
                              {{$t('page.index.AllProducts')}}
                             </span>
                           </div>
                           <!-- :class="index === current ? 'bg-color' : ''" -->
                           <div class="sort" :class="categoryLists.length > 10 ? 'sort-scroll' : ''">
                             <div
                               class="row-between-wrapper Eachproduct"
                               v-for="(item, index) in categoryLists"
                               :key="index"
                               style=" font-weight: 400;
                               padding: 10px 0;
                               cursor: pointer;
                               width: 140px;
                               "
                             >
                               <div style="font-size: 14px;display: flex; align-items: center;" class="" @click="goCate(item,index)">
                                 <div style="width: 100px;text-overflow: ellipsis;">
                                   <span :style="isDanger ==true && currer == index?'color:#f89900':'color:#000'">{{ item.cate_name }}</span>
                                 </div>
                                 <div>
                                   <i v-if="item.isshows == false" :style="isDanger ==true && currer == index?'color:#f89900':'color:#000'" class="iconfont icon-you" style="margin-right: 0;font-size: 13px;"></i>
                                   <i v-if="item.isshows == true" :style="isDanger ==true && currer == index?'color:red':'color:#f89900'" class="iconfont el-icon-arrow-down" style="margin-right: 0;font-size: 13px;"></i>
                                 </div>
                               </div>
                               <!-- <div class="iconfont icon-you"></div> -->
                               <div v-if="currer == index && ProductLevel.length > 0"
                               v-for="(item1, index1) in ProductLevel"
                               :key="index1"
                               @click="goCateOne(item1,index1)"
                                class="Secondaryproducts"
                                :style="trigger == true && triggerindex == index1?'color:#f89900':'color:#000'"
                               >
                                 <div style="margin-top: 15px;width: 100px;text-overflow: ellipsis;">
                                   <span style="text-indent: 10px;
                                      font-size: 10px;
                                      padding: 5px 0;">
                                      {{item1.cate_name}}
                                    </span>
                                 </div>
                               </div>
                             </div>
                           </div>
                           </div>
                        </div>
                      </div>
                 </div>
                 <div class="" style="margin-left: 50px;">
                    <!-- 排序· -->
                    <div class="condition">
                      <div>
                        <label>{{$t('page.index.key')}}：</label>
                        <el-input class="input" v-model="keyword" />
                      </div>
                      <div class="condition-price ml-20">
                        <label>{{$t('page.goodsList.price')}}：</label>
                        <el-input class="input" type="number" v-model="price_low"></el-input> - <el-input type="number" v-model="price_high" class="input"></el-input>
                      </div>
                      <el-button class="ml-20" @click="getList">{{ $t('page.index.query')  }}</el-button>
                      <div class="my-order-btn-box" style="margin-left: 20px;">
                        <div class="btn-box"  style="padding-top: 0px;">
                          <div><el-checkbox v-model="allSelect"  @change="selectAllChange" /> <span>{{ $t('page.index.selectall')  }}</span></div>
                          <el-button  class="btn bg-color" style="text-align: center;" @click="batchListing">{{ $t("page.index.batchListing") }}</el-button>
                          <!-- <el-button v-else-if="userInfo.merchant_info?.is_xj === 1" class="btn bg-color" @click="batchDelisting">{{ $t("page.merchant.batchDelisting") }}</el-button> -->
                        </div>
                      </div>
                    </div>


                    <!-- 商品 -->

                    <div class="" style="margin-top: 30px;">
                      <div>
                        <div class="goods acea-row row-middle">
                          <div style="margin: 30px auto;" class="" v-if="list.length == 0">{{$t('page.user.Nodatafound')}}</div>
                          <!-- @click="goDetail(item)" -->
                          <div v-else class="item" v-for="(item, index) in list" :key="index"    style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;">
                            <div class="pictrue"><img :src="item.image"></div>
                            <div class="money">
                              <div><span class="font-color" style="font-size: 15px;">${{item.price}}</span></div>
                              <div><span class="" style="color: #c4cab3; font-size: 13px;">${{item.jh_price}}</span></div>
                              <!-- <div class="label font-color" v-if="item.issetCoupon">券</div> -->
                            </div>
                            <!-- <div style="margin-top: 5px">
                              <span style="color: #999999; font-size: 13px">{{$t('page.index.Sold') +item.sales}}</span>
                            </div> -->
                            <div v-if="types == 'two'" class="name line1" style="line-height: 22px; height: 43px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;">  {{item.store_name}}</div>
                              <div v-if="types == 'one'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_en}}</div>
                              <div v-if="types == 'three'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_tw}}</div>
                              <div v-if="types == 'four'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_th}}</div>
                              <div v-if="types == 'five'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_ja}}</div>
                              <div v-if="types == 'six'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_tr}}</div>
                              <div v-if="types == 'seven'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_vi}}</div>
                              <div v-if="types == 'eight'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_hi}}</div>
                              <div v-if="types == 'nine'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_tr}}</div>
                              <div v-if="types == 'ten'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_ar}}</div>
                              <div v-if="types == 'eleven'" class="name line1" style="line-height: 22px; height: 43px;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-line-clamp: 2;
                              -webkit-box-orient: vertical;">  {{item.store_name_ko}}</div>
                            <div class="stock" style="display: flex; align-items: center; margin-bottom: 25px;">
                              <div>
                                <el-checkbox v-if="item.jj_status!=1"  class="" v-model="item.checkbox" />
                                <!-- <i class="el-icon-shopping-cart-full" style="margin-right: 8px;font-weight: 600;color: #424542;"></i> -->
                                <!-- <span style="color: #000; font-weight: 600;
                                font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif!important;">
                                {{$t('page.index.PurchaseNow')}}
                                </span> -->
                              </div>
                              <div class="foot">
                                <div class="btn-wrapper">
                                  <!-- Already listed   listing -->
                                  <div class="pay" :style="item.jj_status==1?'background-color:#ccc;border:#ccc;':''" v-if="userInfo.merchant_info?.is_sj === 1" @click="handlebut(item.product_id, 1,item.jj_status)">{{item.jj_status==1?$t("page.index.Alreadylisted"):item.jj_status==2?$t("page.index.listing"):''}}</div>
                                  <!-- <div class="pay" v-if="userInfo.merchant_info?.is_xj === 1" @click="handlebut(goods.product_id, 2,goods.jj_status)">{{$t('page.merchant.goodXj')}}</div> -->
                                </div>
                              </div>
                              <!-- <div>
                                <i class="el-icon-star-off" style="font-size: 14px; color: #000;"></i>
                              </div> -->
                            </div>
                          </div>
                        </div>
                        <el-pagination v-if="total > 0" background layout="prev, pager, next" :total="total" :pageSize="limit" @current-change="bindPageCur"></el-pagination>
                      </div>
                    </div>
                 </div>
              </div>
         </div>

       <div v-if="key == 25">
           <!-- <div class="user-com-title" style="margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">商品库</div> -->
           <div class="wrapper sort-count goods_cate" style="display: flex; justify-content: start;"  v-loading="loading">
                <div class="">
                     <div class="classification" style="width: 140px; margin-left: -25px; border-right: 1px solid #eeeeee;">
                       <div class="titles">
                         <span>{{$t('page.index.Category')}}</span>
                       </div>
                       <div>
                         <!-- 分类 -->
                         <div class="category acea-row row-middle" >
                          <div @click="Allproducts()" class="products" style="">
                            <span id="" :style="isDanger1 == true && currer1 ==-1 ?'color:#f89900':'color:#000'" style="font-size: 14px;">
                             {{$t('page.index.AllProducts')}}
                            </span>
                          </div>
                          <!-- :class="index === current ? 'bg-color' : ''" -->
                          <div class="sort" :class="categoryLists.length > 10 ? 'sort-scroll' : ''">
                            <div
                              class="row-between-wrapper Eachproduct"
                              v-for="(item, index) in categoryLists"
                              :key="index"
                              style=" font-weight: 400;
                              padding: 10px 0;
                              cursor: pointer;
                              width: 140px;
                              "
                            >
                              <div style="font-size: 14px;display: flex; align-items: center;" class="" @click="goCate2(item,index)">
                                <div style="width: 100px;text-overflow: ellipsis;">
                                  <span :style="isDanger1 ==true && currer1 == index?'color:#f89900':'color:#000'">{{ item.cate_name }}</span>
                                </div>
                                <div>
                                  <i v-if="item.isshows1 == false" :style="isDanger1 ==true && currer1 == index?'color:#f89900':'color:#000'" class="iconfont icon-you" style="margin-right: 0;font-size: 13px;"></i>
                                  <i v-if="item.isshows1 == true" :style="isDanger1 ==true && currer1 == index?'color:red':'color:#f89900'" class="iconfont el-icon-arrow-down" style="margin-right: 0;font-size: 13px;"></i>
                                </div>
                              </div>
                              <!-- <div class="iconfont icon-you"></div> -->
                              <div v-if="currer1 == index && ProductLevel.length > 0"
                              v-for="(item1, index1) in ProductLevel"
                              :key="index1"
                              @click="goCateOne2(item1,index1)"
                               class="Secondaryproducts"
                               :style="trigger1 == true && triggerindex1 == index1?'color:#f89900':'color:#000'"
                              >
                                <div style="margin-top: 15px;width: 100px;text-overflow: ellipsis;">
                                  <span style="text-indent: 10px;
                                     font-size: 10px;
                                     padding: 5px 0;">
                                     {{item1.cate_name}}
                                   </span>
                                </div>
                              </div>
                            </div>
                          </div>
                          </div>
                       </div>
                     </div>
                </div>
                <div class="" style="margin-left: 50px;">
                   <!-- 排序· -->
                   <div class="condition">
                     <div>
                       <label>{{$t('page.index.key')}}：</label>
                       <el-input class="input" v-model="keyword1" />
                     </div>
                     <div class="condition-price ml-20">
                       <label>{{$t('page.goodsList.price')}}：</label>
                       <el-input class="input" type="number" v-model="price_low"></el-input> - <el-input type="number" v-model="price_high" class="input"></el-input>
                     </div>
                     <el-button class="ml-20" @click="getList">{{ $t('page.index.query')  }}</el-button>
                     <div class="my-order-btn-box" style="margin-left: 20px;">
                       <div class="btn-box"  style="padding-top: 0px;">
                         <!-- <div><el-checkbox v-model="allSelect"  @change="selectAllChange" /> <span> select all  </span></div> -->
                         <!-- <el-button v-if="userInfo.merchant_info?.is_sj === 1" class="btn bg-color" @click="batchListing">{{ $t("page.merchant.batchListing") }}</el-button> -->
                         <!-- <el-button  class="btn bg-color" @click="batchDelisting">{{ $t("page.index.batchDelisting") }}</el-button> -->
                       </div>
                     </div>
                   </div>

                   <!-- 商品 -->

                   <div class="" style="margin-top: 30px;">
                     <div>
                       <div class="goods acea-row row-middle">
                         <div style="margin: 30px auto;" class="" v-if="listOne.length == 0">{{$t('page.user.Nodatafound')}}</div>
                         <!-- @click="goDetail(item)" -->
                         <div v-else class="item" v-for="(item, index) in listOne" :key="index"    style="border: 1px solid #eeeeee; border-radius: 5px;margin-left: 0px;">
                           <div class="pictrue"><img :src="item.image"></div>
                           <div class="money acea-row row-between-wrapper">
                             <div><span class="font-color" style="font-size: 15px;">${{item.price}}</span></div>
                             <!-- <div><span class="font-color" style="font-size: 15px;">${{item.price}}</span></div> -->
                             <!-- <div class="label font-color" v-if="item.issetCoupon">券</div> -->
                           </div>
                           <!-- <div style="margin-top: 5px">
                             <span style="color: #999999; font-size: 13px">{{$t('page.index.Sold') +item.sales}}</span>
                           </div> -->
                           <div v-if="types == 'two'" class="name line1" style="line-height: 22px; height: 43px;
                           overflow: hidden;
                           text-overflow: ellipsis;
                           display: -webkit-box;
                           -webkit-line-clamp: 2;
                           -webkit-box-orient: vertical;">  {{item.store_name}}</div>
                                             <div v-if="types == 'one'" class="name line1" style="line-height: 22px; height: 43px;
                                             overflow: hidden;
                                             text-overflow: ellipsis;
                                             display: -webkit-box;
                                             -webkit-line-clamp: 2;
                                             -webkit-box-orient: vertical;">  {{item.store_name_en}}</div>
                            <div v-if="types == 'three'" class="name line1" style="line-height: 22px; height: 43px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;">  {{item.store_name_tw}}</div>
                             <div v-if="types == 'four'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_th}}</div>
                             <div v-if="types == 'five'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_ja}}</div>
                             <div v-if="types == 'six'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_tr}}</div>
                             <div v-if="types == 'seven'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_vi}}</div>
                             <div v-if="types == 'eight'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_hi}}</div>
                             <div v-if="types == 'nine'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_tr}}</div>
                             <div v-if="types == 'ten'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_ar}}</div>
                             <div v-if="types == 'eleven'" class="name line1" style="line-height: 22px; height: 43px;
                             overflow: hidden;
                             text-overflow: ellipsis;
                             display: -webkit-box;
                             -webkit-line-clamp: 2;
                             -webkit-box-orient: vertical;">  {{item.store_name_ko}}</div>
                           <!-- <div class="stock" style="display: flex; align-items: center; margin-bottom: 25px;">
                             <div>
                               <el-checkbox v-if="item.jj_status != 1"  class="" v-model="item.checkbox" />

                             </div>
                             <div class="foot">
                               <div class="btn-wrapper">

                                 <div class="pay"  @click="handlebut(item.product_id, 2,item.jj_status)">{{$t('page.index.goodXj')}}</div>
                               </div>
                             </div>

                           </div> -->
                         </div>
                       </div>
                       <el-pagination v-if="total1 > 0" background layout="prev, pager, next" :total="total1" :pageSize="limit1" @current-change="bindPageCur"></el-pagination>
                     </div>
                   </div>
                </div>
             </div>
        </div>


        </div>
    </div>
    <el-dialog
      title="payPassword"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-input v-model="palyPwd" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handtohuo">OK</el-button>
      </span>
    </el-dialog>
    <el-drawer
      :title="$t('page.merchant.orderInfo')"
      :visible.sync="drawer"
      direction="rtl"
      >
        <div class="drawer-box">
          <div v-for="(c, i) in drawerInfo" :key="i">
            <div class="mb-10">{{c.title}}</div>
            <div class="detail_item" v-for="(e, j) in c.list" :key="j">
              <span class="t1">{{ e.title }}：</span>
              <span class="t2">{{ e.value }}</span>
            </div>
          </div>
        </div>
    </el-drawer>
    <ChatItem
      v-if="$auth.user.service"
      :dialogVisible="chatVisible"
      :title="$auth.user.service.nickname"
      :role="2"
      :mer_id="$auth.user.service.mer_id"
      :uId="userUid"
      :userId="$auth.user.uid"
      @close="chatVisible = false" />
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { Message,Loading } from 'element-ui';
import categoryList from "@/components/categoryList";
import ChatItem from "@/components/chat";
import { timeStampToTime } from "@/utils/index";
  export default {
    name: "Merchantbackend",
    auth: "guest",
    components: {
      categoryList,
      ChatItem
    },
    data(){
      return {
        upLoadUrl:process.env.BASE_URL+"/api/upload/image/file",
        userMenu:[
          {
            key:22,
            url:require('@/utils/img/yibiao666.png'),
            url1:require('@/utils/img/yibiao986.png'),
            title: this.$t('page.user.Dashboard'),
          },
          {
            key:23,
            url:require('@/utils/img/zhanghu666.png'),
            url1:require('@/utils/img/zhanghu986.png'),
            title: this.$t('page.index.MerchantOrders'),
          },
          {
            key:24,
            url:require('@/utils/img/shangpinku666.png'),
            url1:require('@/utils/img/shangpinku986.png'),
            title:this.$t('page.index.ProductLibrary'),
          },
          {
            key:25,
            url:require('@/utils/img/zaishou666.png'),
            url1:require('@/utils/img/zaishou986.png'),
            title:this.$t('page.index.Goodssale'),
          },
          // {
          //   key:12,
          //   url:require('@/utils/img/yushou666.png'),
          //   url1:require('@/utils/img/yushou986.png'),
          //   title: this.$t('page.user.preorder'),
          //   link:'/user/presell_order'
          // },
          //  {
          //   key:8,
          //   url:require('@/utils/img/shouhou666.png'),
          //   url1:require('@/utils/img/shouhou986.png'),
          //   title: this.$t('page.user.orderStatus[4].name'),
          //   link:'/user/refund_list'
          // },
          // {
          //   key:2,
          //   url:require('@/utils/img/yue666.png'),
          //   url1:require('@/utils/img/yue986.png'),
          //   title:this.$t('page.user.mybalance'),
          //   link:'/user/balance'
          // },
          // {
          //   key:3,
          //   url:require('@/utils/img/jifen666.png'),
          //   url1:require('@/utils/img/jifen986.png'),
          //   title: this.$t('page.user.integral'),
          //   link:'/user/integral'
          // },
          // {
          //   key:7,
          //   url:require('@/utils/img/shoucang666.png'),
          //   url1:require('@/utils/img/shoucang986.png'),
          //   title: this.$t('page.users.userGoodsCollection.navTitle'),
          //   link:'/user/collect'
          // },
          // {
          //   key:4,
          //   url:require('@/utils/img/dizhi666.png'),
          //   url1:require('@/utils/img/dizhi986.png'),
          //   title: this.$t('page.users.userAddressList.navTitle'),
          //   link:'/user/address_list'
          // },
         // {
         //    key:1,
         //    url:require('@/utils/img/youhuiquan666.png'),
         //    url1:require('@/utils/img/youhuiquan986.png'),
         //    title: this.$t('page.users.userCoupon.navTitle'),
         //    link:'/user/my_coupon'
         //  },
          //  {
          //   key:10,
          //   url:require('@/utils/img/fapiao666.png'),
          //   url1:require('@/utils/img/fapiao986.png'),
          //   title: this.$t('page.users.invoice.myinvoice'),
          //   link:'/user/invoice_list'
          // },
          // {
          //   key:9,
          //   url:require('@/utils/img/ruzhu666.png'),
          //   url1:require('@/utils/img/ruzhu986.png'),
          //   title: this.$t('page.users.settled.title'),
          //   link:'/user/settle_record'
          // },
          // {
          //   key:14,
          //   url:require('@/utils/img/houtai666.png'),
          //   url1:require('@/utils/img/houtai986.png'),
          //   title: this.$t('page.merchant.title'),
          //   link:'/user/merchant'
          // },
          // {
          //   key:15,
          //   url:require('@/utils/img/fenxiao666.png'),
          //   url1:require('@/utils/img/fenxiao986.png'),
          //   title: this.$t('page.distribution.title'),
          //   link:'/user/distribution'
          // }
        ],
        ImageShow:false,
        menuCur:22,
        userInfo:{},
        indexCur:0,
        key:22,
        messageNum:0,
          tabCur:0,
          chatVisible:false,
          agentChatVisible:false,
          tabList:[
            {
              title:this.$t('page.index.delivery'),
              key:0
            },
            {
              title:this.$t('page.index.shipped'),
              key:1
            },
            {
              title:this.$t('page.index.completed'),
              key:2
            },
            // {
            //   title:this.$t('page.merchant.productLibrary'),
            //   key:3
            // },
            // {
            //   title:this.$t('page.merchant.forSale'),
            //   key:4
            // }
          ],
          drawer:false,
          drawerInfo: [
          {
            title: this.$t("page.merchant.detailsT1"),
            list: [
              {
                name: "real_name",
                title: this.$t("page.merchant.userNick"),
                value: "13199009933",
              },
              {
                name: "user_phone",
                title: this.$t("page.merchant.tel"),
                value: "13199009933",
              },
              {
                name: "user_address",
                title: this.$t("page.merchant.address"),
                value: "13199009933",
              },
            ],
          },
          {
            title: this.$t("page.merchant.detailsT2"),
            list: [
              {
                name: "order_sn",
                title: this.$t("page.merchant.orderId"),
                value: "13199009933",
              },
              {
                name: "total_price",
                title: this.$t("page.merchant.orderSum"),
                value: "13199009933",
              },
              {
                name: "real_mer_pay_money",
                title: this.$t("page.merchant.billOfLading"),
                value: "13199009933",
              },
              {
                name: "profit",
                title: this.$t("page.merchant.profit"),
                value: "13199009933",
              },
              {
                name: "pay_postage",
                title: this.$t("page.merchant.postage"),
                value: "13199009933",
              },
              {
                name: "coupon_price",
                title: this.$t("page.merchant.preferential"),
                value: "13199009933",
              },
              {
                name: "give_integral",
                title: this.$t("page.merchant.rewardPoints"),
                value: "13199009933",
              },
              {
                name: "create_time",
                title: this.$t("page.merchant.creationTime"),
                value: "13199009933",
              },
              {
                name: "pay_time",
                title: this.$t("page.index.pay_time"),
                value: "13199009933",
              },
              {
                name: "delivery_time",
                title: this.$t("page.index.status"),
                value: "13199009933",
              },
              {
                name: "verify_time",
                title: this.$t("page.index.status1"),
                value: "13199009933",
              },
            ],
          },
        ],
          dialogVisible:false,
          palyPwd:'',
          tdOrderInfo:'',
          list:[],
          page:1,
          limit:10,
          total:0,
          userInfo:{},
          currentPage:1,
          category:[],
          currentCategory:'',
          categorizeList:[],
          keyword:'',
          keyword1:'',
          price_low:'',
          price_high:'',
          allSelect:false,
          categorize:'',
          merchantLevel:'',
          mer_id:'',
          care_count:'',
          mer_credit:'',
          userUid:0,
          merchant_category_id:'',
          levelInfo:'',
          user_visit:'',

          triggerindex:-1,
          triggerindex1:-1,
          trigger:false,
          trigger1:false,
          isDanger:false, //字体颜色
          isDanger1:false, //字体颜色
          changeIcon:false, //判断图表
          currer:-1, //一级商品下标
          currer1:-1, //一级商品下标
          ProductLevel:[], //商品二级
          current: -1,
          categoryLists: [],
          isCollect: false,
          storeList: [],
          brandList:[],
          brandCurrent:[],
          current:0,
          moreCurrent:0,
          seen:false,
          titleName:'',
          erCurrent:0,
          iSdefaults:0,
          productslist:[],
          pullRefreshss: true, // 代表可以进行下拉加载，false代表不能
          page: 1, //代表页面的初始页数
          limit:8,
          limit1:8,
          scollY: null,// 离底部距离有多少
          total: 0, //总页数
          title:this.$t('page.index.Dropdowntoloadmore'),
          cid:0,//一级分类
          sid:'',//二级分类
          order: '',
          priceOrder: '',
          rateOrder:'',
          SortOrder:'',
          price_on: '',
          price_off: '',
          news:0,
          is_multiple: false,
          checkedBrands: [],
          is_showMore: true,
          searchVal: '',
          search: '',
          storeLength: false,
          listOne:[],
          total1:0,
          types:'',
          loading:true,

          total_price :0,
          lirun_price :0,
          jrtotal_price :0,
          jrlirun_price :0
      }
    },
    async asyncData({ query }) {
      return {
        indexCur: query.type
      };
    },
    watch:{
      $route: {
        handler: function(val, oldVal){
          this.userMenu.forEach((el,index)=>{
            console.log('el',el)
            if(el.link == val.path){
              this.menuCur = el.key;
              this.indexCur = index;
            }
          })
        },
        // 深度观察监听
        deep: true
      },
      categorize(){
        this.categorizeList = []
        const data = this.category.filter(item=>{
          if(item.value === this.categorize){
            return item.children
          }
        })
        data.forEach(item=>{
          item.children.forEach(childItem=>{
            this.categorizeList = [...this.categorizeList,...childItem.children]
          })
        })
      }
    },
    fetch({ store}) {
      store.commit('isHeader', true);
      store.commit('isFooter', true);
    },
    head() {
      return {
        title: this.$t('page.users.userInfo.personalCenter') + "-"+this.$store.state.titleCon
      }
    },
    async beforeMount() {
      // this.getProductslist('');
      if(this.keyword) this.getStoreList();
      this.getBrandList();
      this.getCategoryList();
       await this.getMessageNum();
      await this.getUserInfo();
      this.getLevelData()
      this.types = this.$cookies.get("type");
      this.userMenu.forEach(el=>{
        if(el.link == this.$route.path){
            this.menuCur = el.key
        }else if(this.$route.path == '/user/refund_select'){
            this.menuCur = 4;
        }else if(this.$route.path == '/user/recharge'){
            this.menuCur = 2;
        }
      })
    },
    methods:{
      Image(){
        this.ImageShow = !this.ImageShow
      },
      handleAvatarSuccess(response,file) {
        if (response.status === 200) {
          this.userInfo.avatar = URL.createObjectURL(file.raw)
          this.$axios.post("/api/user/member/up_avatar",{uid:this.userInfo.uid,avatar:response.data.path}).then(res=>{
            this.$message.success(this.$t("message.login.updateSU"));
            this.$auth.setUser(this.userInfo);
          }).catch(err => {
            this.$message.error(err);
          });
        } else if (response.status === 400) {
          this.$message.error(response.msg);
        }
      },
      //上传图片前的图片验证回调
      beforeAvatarUpload(file) {
        //图片格式
        const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
        //图片大小
        const isLt2M = file.size / 1024 / 1024 <= 2;
        if (!isJPG) {
          this.$message.error(this.$t('page.store.place2'));
        }
        if (!isLt2M) {
          this.$message.error(this.$t('page.store.place4'));
        }
        const _this = this;
        return isJPG && isLt2M;
      },
      getCategoryList(){
          this.$axios.get("/api/store/product/category/lst").then(res=>{
              // console.log('分类000',res)
              this.categoryLists = res.data.list;
              this.categoryLists.forEach(function(value,index){
                value.isshows = false
                value.isshows1 = false
              })
          })
      },
      bindSubmit(){
          this.getSelectedItem();
          this.getProductslist(1);
          this.getStoreList();
          this.getBrandList();
      },
      handleClose(){
          this.checkedBrands = [];
          this.searchVal = this.search = "";
          this.toggleMultiple();
          this.getProductslist(1);
          this.getStoreList();
          this.getBrandList();
      },
      toggleMultiple(){
        this.is_multiple = !this.is_multiple
        if(!this.is_multiple) this.search = ''
      },
      clearPrice(){
          this.price_on = this.price_off = "";
      },
      change(e){
          this.$forceUpdate()
      },
      /**获取品牌*/
      getBrandList(){
        let _this = this;
        _this.$axios.get('/api/store/product/brand/lst',{
          params:{
            limit: 999,
            keyword: _this.keyword,
            pid: _this.sid
          }
        }).then( (res) => {
          _this.brandList = res.data.list
          _this.brandList.unshift({
            'brand_id': '',
            'brand_name': this.$t('page.users.goodsCommentList.all')
          })
        }).catch(function (err) {
          _this.$message.error(err);
        })
      },
      Allproducts(){
        this.keyword = ''
        this.sid = ''
        // this.getProductslist(1)
        this.getList();
         this.isDanger = true
         this.currer = -1
      },
      goCateOne(item,index){
        this.keyword = ''
        this.sid = item.pid
        this.trigger = true
        this.triggerindex = index
        // this.getProductslist(1)
        // this.currentCategory = item.value
        this.currentCategory = item.store_category_id
        this.getList();
      },
      goCateOne2(item,index){
        this.keyword1 = ''
        this.sid = item.pid
        this.trigger1 = true
        this.triggerindex1 = index
        // this.getProductslist(1)
        this.currentCategory = item.store_category_id
        this.getList();
      },
      goCate2(item, index) {
        console.log('item',item)
        this.trigger1 = false
        this.keyword1 = item.cate_name
        this.sid = item.pid
        this.isDanger1 = true
          this.currer1 = index
        // this.getProductslist(1)
        this.categorize = item.value
        this.currentCategory = ''
        this.getList();
        this.categoryLists.forEach(function(value,index){
          if(item.cate_name == value.cate_name){
            value.isshows1 = !value.isshows1
          }else{
            value.isshows1 = false
          }
        })
        if(item.children.length>0){
          this.ProductLevel = item.children[0].children
          if(item.isshows1 == false){
           this.ProductLevel = []
          }
        }
      },
      goCate(item, index) {
        console.log('item',item)
        this.trigger = false
        this.keyword = item.cate_name
        this.sid = item.pid
        this.isDanger = true
          this.currer = index
        // this.getProductslist(1)
        // this.categorize = item.value
        // this.currentCategory = item.store_category_id
        this.getList();
        this.categoryLists.forEach(function(value,index){
          if(item.cate_name == value.cate_name){
            value.isshows = !value.isshows
          }else{
            value.isshows = false
          }
        })
        if(item.children.length>0){
          this.ProductLevel = item.children[0].children
          if(item.isshows == false){
           this.ProductLevel = []
          }
        }
        // if((index + 1) === this.titleName.length){
        //   return ;
        // }
        // const name = this.titleName.reduce((initial, val, idx) => {
        //   if (idx > index) {
        //     return initial;
        //   } else {
        //     initial.push(val);
        //     return initial;
        //   }
        // }, []);
        // this.$router.push({
        //   path: `/goods_cate`,
        //   query: {
        //     sid: item.split('_')[1],
        //     name: encodeURI(name.join(',')),
        //     // name: encodeURI(name.substring(0,name.length-1))
        //   }
        // })
      },
      /**取出多选选中的项 */
      getSelectedItem(){
          if(this.checkedBrands.length > 0){
              this.search = '';
              for(var i=0;i<this.checkedBrands.length;i++){
                  for(var j=0;j<this.brandList.length;j++){
                      if(this.checkedBrands[i] == this.brandList[j]['brand_id']){
                          this.search += this.brandList[j]['brand_name']+',';
                          this.search =  this.subStr(this.search,10)
                      }
                  }
              }
              this.search = this.search.substr(0, this.search.length - 1);
          }
      },
      /**超出省略号代替 */
      subStr(str,max){
          if(str.length > max){
              str = str.substring(0,max) + '...';
          }
           return str;
      },
      goDetail: function (item) {
        if(item.product_type == 1){
          this.$router.push({ path: '/goods_seckill_detail/'+item.product_id,query: { time: item.stop_time,status: item.seckill_status } });
        }else{
          this.$router.push({ path: '/goods_detail/'+item.product_id });
        }
      },
      /**进店逛逛 */
      goStore: function(id){
          this.$router.push({ path: `/store?id=${id}` });
      },
      /**店铺列表 */
      getStoreList(){
          let _this = this;

          if(!_this.keyword){
            _this.storeList = [];
            _this.storeLength = 0;
            return ;
          }

          _this.$axios.get('/api/store/merchant/lst',{
            params:{
               keyword: _this.keyword ? _this.keyword  : '',
               limit: 3
            }
          }).then(function (res) {
          _this.storeList = res.data.list;
          _this.storeLength = res.data.list.length > 2 ? true : false;
          if(_this.storeLength)_this.storeList.length = 2;
        }).catch(function (err) {
          _this.$message.error(err);
        })
      },
      getProductslist(num){
        let _this = this;
        _this.page = num ? num : _this.page;
        let  currentPage = {page: _this.page,limit:_this.limit,keyword: _this.keyword,brand_id: _this.checkedBrands.toString(),
          price_on: _this.price_on, price_off: _this.price_off, order: _this.order, cate_pid: _this.sid, common: 1
        };
        console.log('currentPage',currentPage)

        _this.$axios.get('/api/product/spu/lst', {
          params: currentPage
        }).then(function (res) {
          _this.total = res.data.count;
          _this.productslist = res.data.list;
          _this.list = res.data.list;
        }).catch(function (err) {
          _this.$message.error(err);
        })

      },
      // 分页点击
      bindPageCur(data){
          this.page = data
          this.getProductslist('');
      },
      // category(index){
      //   this.checkedBrands = [];
      //   this.current = index;
      //   this.moreCurrent = index;
      //   this.brandCurrent = this.brandList[index].children;
      //   this.productslist = [];
      //   this.page = 1;
      //   this.erCurrent = 0;
      //   this.order = '';
      //   this.checkedBrands[0] = this.brandList[index]['brand_id'];
      //   this.getProductslist('');
      // },
      defaults(){
        this.iSdefaults = 0;
        this.productslist = [];
        this.page = 1;
        this.order = '';
        this.priceOrder = '';
        // this.rateOrder = '';
        // this.SortOrder = '';
        this.getProductslist('');
      },
      priceSort(sort){
        this.iSdefaults = 2;
        this.productslist = [];
        this.page = 1;
        this.order = sort;
        this.priceOrder = sort;
        // this.rateOrder = '';
        // this.SortOrder = '';
        this.getProductslist('');
      },
      salesSort(sort){
        this.iSdefaults = 1;
        this.productslist = [];
        this.page = 1;
        this.order = sort;
        this.priceOrder = '';
        // this.rateOrder = '';
        // this.SortOrder = sort;
        this.getProductslist('');
      },
      salesRate(rate){
        this.iSdefaults = 3;
        this.productslist = [];
        this.page = 1;
        this.order = rate;
        this.priceOrder = '';
        // this.rateOrder = rate;
        // this.SortOrder = '';
        this.getProductslist('');
      },
      // 1111
      getLevelData() {
        this.$axios.get('/api/merchant/categorylist',{params:{id:this.merchant_category_id}}).then(res=>{
          this.levelInfo = res.data[0]
        })
      },
      goCustomer(item) {
        this.userUid = item.uid
        this.chatVisible = true
      },
      async getMessageNum(){
        await this.$axios.get('/api/user/member/djlist').then(res=>{
          this.user_visit = res.data.user_visit
          this.mer_id = res.data.mer_id
          this.care_count = res.data.care_count
          this.messageNum = res.data.card_num
          this.merchantLevel = res.data.icon
          this.mer_credit = res.data.mer_credit
          this.merchant_category_id = res.data.category_id

          this.total_price = res.data.total_price.toFixed(2)
          this.lirun_price = res.data.lirun_price.toFixed(2)
          this.jrtotal_price = res.data.jrtotal_price.toFixed(2)
          this.jrlirun_price = res.data.jrlirun_price.toFixed(2)
        })
      },
      handleClose() {
        this.palyPwd= ''
        this.tdOrderInfo = ''
      },
      goMerDetail(info) {
        const obj = { 0:  this.$t('page.user.orderStatus[1].name'), 1:  this.$t('page.user.orderStatus[2].name'), 2:  this.$t('page.user.orderStatus[3].name') };
        info.status = obj[info.status];
        this.drawerInfo.forEach((v, i) => {
          v.list.forEach((j, k) => {

            if(j.name === "verify_time"){
              this.$set(this.drawerInfo[i].list[k], "value", info[j.name] || this.$t('page.user.orderStatus[2].name'));
            } else if(j.name === 'delivery_time'){
              this.$set(this.drawerInfo[i].list[k], "value", info[j.name] ? timeStampToTime(info[j.name],'ymdhms') : this.$t('page.user.orderStatus[1].name'));
            }  else if(j.name === 'total_price'){
              this.$set(this.drawerInfo[i].list[k], "value", "$ "+ info['total_price']);
            }  else if(j.name === 'real_mer_pay_money'){
              this.$set(this.drawerInfo[i].list[k], "value", "$ "+ info['real_mer_pay_money']);
            } else if(j.name === 'profit'){
              this.$set(this.drawerInfo[i].list[k], "value", "$ "+(Number(info['total_price']) - info['real_mer_pay_money']).toFixed(2));
            } else {
              this.$set(this.drawerInfo[i].list[k], "value", info[j.name]);
            }
            // this.$set(this.drawerInfo[i].list[k], "value", info[j.name]);
          });
        });
        this.drawer = true
      },
      goTd(info) {
        console.log('info',info)
        if (this.userInfo.now_money < info.real_mer_pay_money) {
          this.$message.error(this.$t("page.index.insufficientbalance"))
          return;
        }
        this.tdOrderInfo = info
        this.dialogVisible = true
        // this.chatVisible = true
      },
      handtohuo() {
        const params= {
          order_id:this.tdOrderInfo.order_id,
          withdraw_pwd:this.palyPwd,
          txt:this.$t('page.merchant.deduction')
        }
        this.$axios.post("/api/user/member/goodslist_tidan",{...params}).then(res=>{
          this.getList();
          this.dialogVisible = false
        }).catch(err=>{
          this.$message.error(err)
        })

      },
      handleCategorize(value){
        this.categorize = value
        this.currentCategory = ''
        this.getList();
      },
      handleIds(value){
        this.currentCategory = value
        this.getList();
      },
      async getUserInfo() {
        await this.$axios.get("/api/user").then(res=>{
          this.userInfo = res.data;
          // console.log('this.userInfo',this.userInfo)
        })
      },
      async bindTab(item) {
        this.tabCur= item.key;
        this.page = 1;
        this.currentPage = 1;
        this.getList();
      },
      // 查看详情
      goDetail(item){
        this.$router.push({
            path: `/order_detail`,
            query:{
                orderId:item.order_id
            }
        })
      },
      getList(){
        const params = {
          page:this.page,
          limit:this.limit
        }
        let url= ''
        if (this.tabCur === 0) {
          console.log('0')
          url = '/api/user/member/orderdfh'
        } else if (this.tabCur === 1) {
          console.log('1')
          url = '/api/user/member/orderyfh'
        } else if (this.tabCur === 2) {
          console.log('2')
          url = '/api/user/member/orderywc'
        } else if (this.tabCur === 3) {
          params.cate_id = this.currentCategory
          params.keyword = this.keyword
          if(this.price_low !==""){
            params.price_low= this.price_low
          }
          if(this.price_high !=""){
            params.price_high = this.price_high
          }
          url = '/api/user/member/goodslist_shang'
          console.log('3333333333333333333333')
        } else if (this.tabCur === 4) {
          params.cate_id = this.currentCategory
          params.keyword = this.keyword1
          if(this.price_low !==""){
            params.price_low= this.price_low
          }
          if(this.price_high !=""){
            params.price_high = this.price_high
          }
          url = '/api/user/member/goodslist_xia'
        }
        console.log("=====url============",url,params)
        console.log('this.tabCur',this.tabCur)
        if(this.tabCur < 3) {
          this.$axios.get(url,{ params }).then(res => {
            console.log('res',res)
            this.total = res.data.count || 0
            // if(this.tabCur === 2){
            //   res.data.list.map(item=>{
            //     let is_refund = 0
            //     if(item.orderProduct.forEach(orderProduct=>{
            //       if(orderProduct.is_refund !== 0){
            //         is_refund =
            //       }
            //     }))
            //     return {...item}
            //   })
            // }
            this.list = res.data.list
          })
        } else if(this.tabCur == 3){
          const loading = Loading.service({
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)'
        });
          this.$axios.get(url,{ params }).then(res=>{
            console.log('res33333',res)
            this.total = res.data.count || 0
            this.list = res.data.data
            loading.close();
          })
        }else if(this.tabCur == 4){
          const loading = Loading.service({
          lock: true,
          background: 'rgba(0, 0, 0, 0.7)'
        });
          this.$axios.get(url,{ params }).then(res=>{
            console.log('res4444',res)
            this.total1 = res.data.count || 0
            this.listOne = res.data.data
            loading.close();
          })
        }

      },
      getCategory() {
        this.$axios.get("api/user/member/djclass").then(res => {
          this.category = res.data
          console.log('this.category',this.category)
        })
      },
      handleChange(){

      },
      isChecked(product_id) {
        return this.checkIds.includes(product_id)
      },
      selectAllChange(value){
        this.list = this.list.map(info=>({...info,checkbox:value}))
      },
      async batchListing(){
        const errIds = []
        const checkIds = []
        this.list.forEach(info => {
          if(info.checkbox){
            checkIds.push(info.product_id)
          }
        })
        let count = 0
        if(checkIds.length == 0) {
          Message.error(this.$t("page.merchant.selectGoods"))
          return
        }
        for (let id of checkIds) {
          await this.$axios.get('api/user/member/goodslist_status',{
          params:{id}
        }).then(res=>{
            count++;
          }).catch(()=>{
            console.log("----")
            errIds.push(id)
            count++;
          })
        }
        if(count === checkIds.length) {
          if(errIds.length === 0){
            Message.success(this.$t("message.login.operationSU"))
          } else {
            Message.error(this.$t('page.merchant.failed') + errIds.length)
          }
          this.list = [];
          this.page = 1;
          this.allSelect = false
          this.getList();
        }

      },
      async batchDelisting(){
        const errIds = []
        const checkIds = []
        this.listOne.forEach(info => {
          if(info.checkbox){
            checkIds.push(info.product_id)
          }
        })
        let count = 0
        if(checkIds.length == 0){
          Message.error(this.$t("page.merchant.selectGoods"))
          return
        }
        for (let id of checkIds) {
          await  this.$axios.get('api/user/member/goodslist_xiastatus',{
          params: {id}
        }).then(res=>{
            count++;
          }).catch(()=>{
            errIds.push(id)
            count++;
          })
        }
        if(count === checkIds.length){
          if(errIds.length === 0){
            Message.success(this.$t("message.login.operationSU"))
          } else {
            Message.error(this.$t('page.merchant.failed') + errIds.length)
          }
          this.list = [];
          this.allSelect = false
          this.page = 1;
          this.getList();
        }
      },

      handlebut(id, flag, type) {
        console.log('id',id)
        console.log('type',type)
        console.log('flag',flag)
        if(type==1) return
        if(flag === 1){
          this.$axios.get("api/user/member/goodslist_status",{
          params: {id}
        }).then((v) => {
            Message.success("Successful operation")
            // this.list = [];
            this.listOne = [];
            // this.page = 1;
            this.getList();
          });
        } else {
          this.$axios.get("api/user/member/goodslist_xiastatus",{
          params: {id}
        }).then((v) => {
            Message.success("Successful operation")
            // this.list = [];
            this.listOne = [];
            // this.page = 1;
            this.getList();
          });
        }

      },
      // 分页点击
      bindPageCur(data){
        this.page = data
        this.getList()
      },
      goPage(menu,index){
        this.menuCur = menu.key
		    console.log('menu',menu)
		    console.log('index',index)
        this.key = menu.key
        if(this.key == 24){
          this.tabCur = 3
          this.getCategory()
          this.getList();
        }else if(this.key == 23){
           this.tabCur = 0
           this.getList();
        }else if(this.key == 25){
          this.tabCur = 4
          this.getList();
        }
        // this.$router.push({path:'/user/backenddashboard'})
        // console.log(this.userMenu)
        // debugger
        // if(index != 3){
        //     this.$router.push({
        //         path: `${menu.link}`,
        //         query:{type:`${index}`}
        //     });
        // }else{
        //     this.$router.push({
        //         path: `${menu.link}`,
        //         query:{type: 0}
        //     });
        // }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .balance{
    width: 250px;
        height: 85px;
        text-align: center;
        background: url(../utils/img/plan.png);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
  }
  // 二级商品
  .Secondaryproducts{
    &:hover{
      color: #f89900 !important;
    }
  }
  // 分类左侧样式
  .classification{
    .titles{
      padding: 20px 0;
      font-size:16px;
      border-bottom: 1px solid #eee;
      color: #333333;
      font-weight: 600;
    }
    //全部商品
    .products{
     padding: 15px 0;
     width: 100%;
     // margin-top:15px;
     &:hover{
       border-right: 2px solid #f89900;
     }
    }
    // 每个商品
    .Eachproduct {
      &:hover{
        border-right: 2px solid #f89900;
      }
    }
  }
  // 分页
  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #f89900 !important;
  }
  .stock {
    color: #969696;
    font-size: 12px;
    margin-top: 14px;
  }
  .trader{
    color: #fff;
    background-color: #e93323;
    display: inline-block;

    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-right: 5px;
    font-size: 12px;
  }
  .cate_name{
    cursor: pointer;
    &.on{
      color: #E93323
    }
  }
  .goods_cate{
    margin-top: 2px;
    .noGoods{
      text-align: center;
      .pictrue{
        width: 274px;
        height: 174px;
        margin: 130px auto 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        font-size: 14px;
        color: #969696;
        margin-top: 20px;
        margin-bottom: 290px;
      }
    }
    .nav{
      width: 100%;
      height: 50px;
      &.showMore{
          height: auto;
          .list{
              height: auto;
          }
      }
      cursor: pointer;
      .navCon{
        padding: 0 17px;
        position: relative;
        &:after{
            content: '';
            display: inline-block;
            position: absolute;
            width: 1140px;
            border-bottom: 1px dotted #EFEFEF;
            bottom: 0;
            left: 60px;
        }
        &.wrapper_1200{
          overflow: unset!important;
          background-color: #fff;
        }
        height: 100%;
        .name{
            color: #969696;
            margin-right: 20px;
            line-height: 50px;
        }
        .moreCon{
          position: relative;
          height: 50px;
          .moreCategory{
            padding: 44px 44px 16px 44px;
            position: absolute;
            top:50px;
            right: -17px;
            width: 1200px;
            background-color: #fff;
            box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);
            .item{
              margin: 0 40px 28px 0;
              // &:hover{
              //   color: #E93323;
              // }
            }
          }
          .multiBtn{
              display: inline-block;
              width: 38px;
              height: 18px;
              line-height: 18px;
              border: 1px solid #C8C8C8;
              text-align: center;
              border-radius: 2px;
              margin-right: 18px;
          }
        }
        .list{
          height: 100%;
          width: 1020px;
          overflow: hidden;
          margin-right: 10px;
          .item{
            line-height: 50px;
            overflow: hidden;
            margin-right: 40px;

            &:hover{
              color: #E93323;
            }
          }
        }
        .more{
          position: relative;
          line-height: 50px;
          text-align: center;
          .iconfont{
            margin-left: 6px;
            font-size: 12px;
            color: #666666;
            display: inline-block;
            transition: all .1s ease;
            &.shouqi{
                 -moz-transform: rotateX(180deg);
                 -o-transform: rotateX(180deg);
                 -ms-transform: rotateX(180deg);
                 transform: rotateX(180deg);
            }
          }
        }
      }
    }
    .el-checkbox{
        height: 50px;
        line-height: 50px;
        color: #282828;
    }
    .title{
      color: #999999;
      height: 46px;
      line-height: 46px;
      .home{
        color: #282828;
      }
    }
    .sort-count{
        width: 1200px;
        margin: 0 auto;
    }
    .wrapper{
      background-color: #fff;
      padding: 25px 17px;
      cursor: pointer;
      .list{
        width: 1100px;
        border-bottom: 1px dotted #EFEFEF;
        padding-bottom: 10px;
        .item{
          margin-right: 30px;
          margin-bottom: 10px;
          &:hover{
            color: #E93323;
          }
        }
      }

      .sort{
        .item{
          margin-right: 30px;
          // &:hover{
          //   color: #E93323;
          // }
          .icon{
            font-size: 15px;
            margin-left: 5px;
          }
          .iconfont{
            font-size: 15px;
            color: #E2E2E2;
            margin-left: 5px;
          }
        }
        .name{
            color: #969696;
            margin-right: 20px;
        }
      }
    }
    .goods{
      width: 1000px;
      .item{
        width: 195px;
        height: 375px;
        background-color: #fff;
        padding: 16px 16px 16px 16px;
        cursor: pointer;
        transform: scale(1);
        transition: all 1s;
        margin-right: 15px;
        margin-bottom: 20px;
        &:hover {
          transform: scale(1.1);
          transition: all 1s;
          box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
          border: 1px solid #f9ad33 !important;
        }
        .pictrue{
          // width: 192px;
          height: 192px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .money{
          margin-top: 12px;
          .font-color{
            font-weight: bold;
            font-size: 22px;
          }
          .y_money{
            font-size: 12px;
            color: #AAAAAA;
            text-decoration: line-through;
            margin-left: 8px;
          }
          .label{
            width: 20px;
            height: 20px;
            background: linear-gradient(330deg, rgba(231, 85, 67, 0.15) 0%, rgba(244, 103, 83, 0.15) 100%);
            font-size: 12px;
            text-align: center;
            line-height: 20px;
          }
        }
        .name{
          color: #5A5A5A;
          margin-top: 8px;
          // height: 75px;
        }
        .bottom{
          font-size: 12px;
          color: #AAAAAA;
          margin-top: 10px;
        }
      }
    }
    .price-range{
        position: relative;
        top: -15px;
        padding: 10px;
        &:hover{
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            .action-box{
                display: block;
            }
        }
        .action-box{
            display: none;
            position: absolute;
            left: 0;
            bottom: -50px;
            text-align: center;
            background: #F9F9F9;
            height: 50px;
            line-height: 50px;
            width: 100%;
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
            padding: 0 15px;
            overflow: hidden;
            .clear{
                float: left;
                color: #999999;
            }
            .submit{
                float: right;
                color: #666666;
                width: 60px;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                background-color: #F1F1F1;
                border-radius: 2px;
                border: 1px solid #D4D4D4;
            }

        }
        .price-count{
            .input{
                width: 80px;
                height: 32px;
                position: relative;

                    &:before{
                        content: '$';
                        display: inline-block;
                        color: #D4D4D4;
                        position: absolute;
                        left: 5px;
                        top: 0;
                        line-height: 32px;
                    }
                /deep/ .el-input__inner{
                    height: 32px;
                    line-height: 32px;
                    padding-left: 18px;
                }
            }
        }
    }
    .search-count{
        display: inline-block;
        background-color: #fff;
        height: 26px;
        line-height: 26px;
        color: #282828;
        padding: 0 10px;
        margin-bottom: 15px;
        .search-selected{
            display: inline-block;
            min-width: 100px;
            max-width: 200px;
            /deep/ .el-input__inner{
                border: none;
                height: 26px;
                line-height: 26px;
                color: #969696;
            }
        }
        .el-icon-close{
            cursor: pointer;
            color: #969696;
            font-size: 12px;
        }
    }
  }
  .search-store{
      width: 1200px;
      margin: 0 auto 20px;
      border-radius: 4px;
      overflow: hidden;
      .moreBtn{
        width: 32px;
        height: 76px;
        padding: 10px 0;
        background-color: #fff;
        color: #999999;
        text-align: center;
        font-size: 12px;
        float: left;
            .iconfont{
                display: block;
                font-size: 8px;
                border: 1px solid #8B8B8B;
                border-radius: 100%;
                width: 11px;
                height: 11px;
                line-height: 11px;
                text-align: center;
                margin: 3px auto 0;
            }
        }
      .store-count{
          overflow: hidden;
          width: 100%;
          .item{
              height: 96px;
              width: 100%;
              -webkit-justify-content: space-between;
              justify-content: space-between;
              padding: 0 17px;
              background-color: #fff;
          }
          &.moreStore{
               float: left;
               width: auto;
              .item{
                width: 570px;
                float: left;
                margin-right: 14px;
              }
          }
          .store-name{
              align-items: center;
              .image{
                width: 61px;
                height: 61px;
                border-radius: 100%;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .name{
                margin-left: 15px;
                color: #282828;
                line-height: 26px;
                >span{
                    display: block;
                    color: #999999;
                }
            }
          }
          .store-go{
              align-items: center;
              .store-btn{
                  width: 78px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  border-radius: 4px;
                  font-size: 12px;
                  &.goIn{
                      color: #fff;
                      background-color: #E93323;
                      margin-right: 12px;
                      border: 1px solid #E93323;
                  }
                  &.collect{
                     color: #E93323;
                     border: 1px solid #E93323;
                     background-color: #fff;
                  }
                  &.hasCollect{
                      color: #999999;
                      border-color: #999999;
                  }
              }
          }

      }
  }
  .select-footer{
      text-align: center;
      margin: 30px 0;
  }
  .visit{
    width: 250px;
    border: 1px solid #eeeeee;
    .visit-title{
      width: 100%;
          height: 49px;
          line-height: 50px;
          font-size: 14px;
          border-bottom: 1px solid #eeeeee;
          padding-left: 12px;
          // margin-bottom: 10px;
    }
    .el-empty{
      display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          text-align: center;
          box-sizing: border-box;
          padding: 40px 0;
    }
  }
  .count-item{
    width: 248px;
        height: 83px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fafafa;
        text-align: center;
        margin-bottom: 20px;
        border: 1px solid #eeeeee;
        cursor: pointer;
        margin-right: 12px;
        // box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
  }
  .MyOrder{
      height: 35px;
      display: flex;
      align-items: center;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      padding: 0 20px;
      background-color: #eee;
      border-radius: 5px;
      color: #999;
    }
.ml-20{
  margin-left: 20px;
}
.user-com-title{position: relative;}
.user_recharge{
display: inline-block;
position: absolute;
float: right;
right: 20px;
color: blue;
cursor: pointer;
}
.user_reflect{
display: inline-block;
position: absolute;
float: right;
right: 80px;
color: blue;
cursor: pointer;
}
.balance-wrapper{
  .btn-box{
    padding-top:30px;
    display: flex;
    align-items: center;
    .merchant_info{
      div{
        margin-right: 20px;
      }
      span{
        margin-right: 10px;
      }
    }
  }
  .level-item{
      // width: calc(calc(100% - 60px) / 3);
      width: 248px;
      // height: 83px;
      margin-top: -20px;
      margin-right: 20px;
      margin-bottom: 20px;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      color: #666666;
      border-radius: 10px;
      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
      >div{
        padding: 2px;
      }
      .icon{
        width: 50px;
        height: 50px;
      }
    }
.balance-box{
  // padding-top: 45px;
  .flex{
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
  }
  .money-box{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
      .money-item{
        display: inline-block;
        width: 25%;
        margin:0 0 50px;
        span{
          color: #969696;
          font-size: 14px;
        }
        p{
          margin-top: 10px;
          color: #282828;
          font-size: 32px;
        }
      }
  }
  .tab-box{
    padding-right: 54px;
    // margin-top: 35px;
    .hd{
      padding-bottom: 15px;
      // border-bottom: 1px solid #ECECEC;
      .hd-item{
        position: relative;
        float: left;
        padding: 0 10px;
        margin-right: 30px;
        text-align: center;
        font-size: 16px;
        color: #999999;
        cursor: pointer;
        &.on{
          color: #fff;
          background-color: #f89900;
          // &:after{
          //   content: ' ';
          //   position: absolute;
          //   left: 0;
          //   width:100%;
          //   bottom: -16px;
          //   height: 2px;
          //   background: #f89900;
          // }
        }
      }
    }
    .bd{
      .bd-item{
        margin-top: 20px;
        .time{
          height: 36px;
          line-height: 36px;
          background: #F4F4F4;
          color: #969696;
          font-size: 14px;
          padding: 0 10px;
        }
        .list li{
          position: relative;
          padding: 18px 10px;
          border-bottom: 1px dashed #D0D0D0;
          .txt{
            color: #282828;
            font-size: 16px;
          }
          .txt-time{
            margin-top: 10px;
            color: #969696;
            font-size: 14px;
          }
          .num{
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -8px;
            font-size: 16px;
            font-weight: bold;
            color: #E93323;
          }
          .green{
            color: #43B36D;
          }
        }
      }
    }
  }
}
}
.pages-box{
  padding-right: 54px;
  margin-top: 30px;
  text-align: right;
}

.order-list {
    li {
      position: relative;
      padding: 30px 0 26px;
      border-bottom: 1px solid #ECECEC;
      .refund-icon{
        position: absolute;
        right: 50px;
        top: 40px;
      }
      .bd {
        padding-right: 40px;
        border-bottom: 1px dashed #E1E1E1;
        cursor: pointer;
        .order-txt {
          color: #282828;
          font-size: 14px;
          .mer_name{
            display: inline-block;
            margin-left: 40px;
            color: #666666;
            &:hover{
              color: #E93323;
            }
          }
          .status {
            float: right;
            color: #E93323;
          }
        }
        .content {
          margin-top: 20px;
          .goods-item {
            display: flex;
            position: relative;
            margin-bottom: 20px;
            align-items: center;
            .checkbox{
              margin-right: 20px;
            }
            .img-box {
              width: 120px;
              height: 120px;
              position: relative;
              span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
                line-height: 18px;
                background: rgba(0,0,0,.5);
                position: absolute;
                left: 0;
                bottom: 0;
                color: #fff;
              }
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .info-txt {
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 500px;
              margin-left: 24px;
              font-size: 14px;
              .info{
                font-size: 12px;
                color: #aaa;
                margin-top: 4px;
              }
              .price {
                margin-top: 10px;
                color: #E93323;
              }

            }
            .develity_date{
              color: #FD6523;
              margin-top: 6px;
              font-size: 14px;
            }
            .num {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: #999999;
              }
          }
        }
      }
    }
  }
  .foot {
    // padding-top: 26px;
    // padding-right: 32px;
    p {
      text-align: right;
      color: #666;
      font-size: 14px;
      .price {
        color: #E93323;
      }
    }
    .btn-wrapper {
      display: flex;
      justify-content: flex-end;
      // margin-top: 20px;
      div {
        width: 110px;
        height: 36px;
        text-align: center;
        line-height: 34px;
        margin-left: 20px;
        border: 1px solid #999999;
        border-radius: 4px;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
        &.pay {
          border-color: #f89900;
          background: #f89900;
          color: #fff;
        }
      }
    }
  }
  .condition{
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    .condition-price{
      margin-left:20px;
    }
    .ml-20{
      margin-left: 20px;
    }
    .input{
      width: 100px;
    }
  }
  .my-order-btn-box{
    .btn-box{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .btn{
        // width: 93px;
        color: #fff;
        border-radius: 26px;
        font-size: 14px;
        margin-left: 10px;
      }
      .allSelect{
        line-height: 32px;
        margin-right: 25px;
      }
    }
  }
  .categorize-box{
	width: calc(100% - 130px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap:wrap;

	.categorize-item{
		padding: 10px 0px;
		font-size: 14px;
    width: 150px;
		flex-shrink:0;
    flex-grow:0;
		&.active{
			color: #e93323;
		}
	}
}
.bottom-categorize{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
  width: calc(100% - 130px);

	.classifier{
		flex-shrink:0;
    flex-grow:0;
		padding: 10px 0;
    width: 150px;
    font-size: 14px;
		&.active{
      color: #e93323;
		}
	}

}
.flex{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;
  label{
    width: 100px;
    padding: 10px 0px;
    flex-shrink:0;
    flex-grow:0;
    display: inline-block;
  }
}
    /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    width: 2px;
    height: 2px;
    background-color: #0003;
    border-radius: 10px;
    transition: all .2s ease-in-out;
  }
  .drawer-box{
    padding: 20px;

    .detail_item {
      font-size: 12px;
      margin: 10px 0;
      .t1 {
        display: inline-block;
        width: 75px;
        text-align: right;
        margin-right: 10px;
        color: rgb(93, 93, 93);
      }
      .t2 {
        color: rgb(93, 93, 93);
      }
    }
    .mb-10{
      margin-bottom: 10px;
    }
  }
  .icon-img{
    width: 20px;
    height: 20px;
  }
.user-wrapper{
  .left-box{
    width: 180px;
    // padding: 0 30px;
    // float: left;
    .user-info{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100px;
      // background: #fff;
      color: #282828;
      font-size: 14px;
      .svip{
        background: url("~assets/images/vipUser.png") center/cover no-repeat;
        width: 59px;
        height: 62px;
        position: relative;
        .sign{
          width: 32px;
          height: 14px;
          position: absolute;
          bottom: -12px;
          left:50%;
          margin-left: -18px;
        }
      }
      img{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin: 9px 1px;
      }
      .name{
        margin-top: 10px;
        padding: 0 15px;
      }
    }
    .user-menu{
      margin-top: 8px;
      padding:25px;
      // background: #fff;
      .menu-item{
        display: block;
        // margin-bottom: 30px;
        margin-top: 5px;
        margin-left: 15px;
        text-align: center;
        color: #666666;
        cursor: pointer;
        font-size: 14px;
        &.active{
          color: #f89900;
          // background: url("~assets/images/left-icon.png") no-repeat left center;
        }
      }
    }
  }
  .right-box{
    // width:1012px;
    min-height: 730px;
    margin-left: 8px;
    padding-bottom: 30px;
    // float: right;
    background: #fff;
    padding-left: 54px;
  }
}
.router-tips{
  height:60px;
  line-height: 60px;
  font-size: 14px;
  a{
    color: #333;
  }
  span{
    color: #999999;
  }
}
</style>
